import TextComp from '@/components/work/text-comp/index.vue'
import AComp from '@/components/work/a-comp/index.vue'
import BtnComp from '@/components/work/button-comp/index.vue'
import ImageComp from '@/components/work/image-comp/index.vue'
import H2Comp from '@/components/work/h2-comp/index.vue'
import type { CompListState } from '@/types'
import { da } from 'element-plus/es/locales.mjs'
import { uploadImage } from '@/api'

export const compList: CompListState[] = [{
  component: TextComp,
  text: '文本按钮',
  btnConfig: {
    type: 'primary',
  },
  css: {
    x: 0,
    y: 0,
    width: 100,
    height: 40,
    backgroundColor: '#ffffff',
    color: '#000000',
    lineHeight: 40,
    borderWidth: 0,
    borderColor: '#000000',
    borderStyle: {
      value: 'solid',
      type: 'button',
      options: [{
        value: 'solid'
      }, {
        value: 'dashed'
      }],
    },
    borderRadius: 0,
    textAlign: {
      value: 'center',
      type: 'button',
      options: [{
        value: 'left'
      }, {
        value: 'center'
      }, {
        value: 'right'
      }]
    },
    fontWeight: false
  }
}, {
  component: ImageComp,
  text: '上传图片',
  isCurt: false,
  beforeCreate(isCurt = true) {
    return new Promise((resolve, reject) => {
      // 自己实现的获取图片文件
      const input = document.createElement('input');
      input.type = 'file';
      document.body.appendChild(input)
      input.click();
      input.addEventListener('change', async () => {
        const file = input.files![0];
        try {
          if (isCurt) {
            // 裁剪
            const fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.addEventListener('load', () => {
              resolve({ name: file.name, url: fileReader.result })
            })
          } else {
            // 不裁剪
            const resp = await uploadImage(file);
            resolve(resp.data.data)
          }
        } catch (error) {
          reject(error)
        }
        input.remove();
      })
    })
  },
  btnConfig: {
    type: 'success',
  },
  css: {
    url: '',
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    backgroundColor: '#f0f0f0'
  }
}, {
  component: ImageComp,
  text: '裁剪上传图片',
  isCurt: true,
  beforeCreate(isCurt = true) {
    return new Promise((resolve, reject) => {
      // 自己实现的获取图片文件
      const input = document.createElement('input');
      input.type = 'file';
      document.body.appendChild(input)
      input.click();
      input.addEventListener('change', async () => {
        const file = input.files![0];
        try {
          if (isCurt) {
            // 裁剪
            const fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.addEventListener('load', () => {
              resolve({ name: file.name, url: fileReader.result })
            })
          } else {
            // 不裁剪
            const resp = await uploadImage(file);
            resolve(resp.data.data)
          }
        } catch (error) {
          reject(error)
        }
        input.remove();
      })
    })
  },
  btnConfig: {
    type: 'success',
  },
  css: {
    url: '',
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    backgroundColor: '#f0f0f0'
  }
}, {
  component: AComp,
  text: '超链接文本',
  btnConfig: {
    type: 'primary',
  },
  css: {
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    backgroundColor: '#f0f0f0',
    color: '#000000',
    lineHeight: 100,
    borderWidth: 1,
    borderColor: '#000000',
    borderStyle: {
      value: 'solid',
      type: 'button',
      options: [{
        value: 'solid'
      }, {
        value: 'dashed'
      }],
    },
    borderRadius: 0,
    textAlign: {
      value: 'center',
      type: 'button',
      options: [{
        value: 'left'
      }, {
        value: 'center'
      }, {
        value: 'right'
      }]
    },
    fontWeight: false,
    display: {
      value: 'block',
      type: 'button',
      options: [{
        value: 'line'
      }, {
        value: 'line-block'
      }, {
        value: 'block'
      }]
    }
  }
},
{
  component: BtnComp,
  text: '按钮组件',
  btnConfig: {
    type: 'success',
  },
  css: {
    x: 0,
    y: 0,
    width: 100,
    height: 40,
    backgroundColor: 'skyblue',
    color: '#ffffff',
    lineHeight: 40,
    borderWidth: 0,
    borderColor: '#000000',
    borderStyle: {
      value: 'solid',
      type: 'button',
      options: [{
        value: 'solid'
      }, {
        value: 'dashed'
      }],
    },
    borderRadius: 10,
    textAlign: {
      value: 'center',
      type: 'button',
      options: [{
        value: 'left'
      }, {
        value: 'center'
      }, {
        value: 'right'
      }]
    },
    fontWeight: false
  }
}]